<template>
  <div>
    <myheader></myheader>
    <b class="line"></b>
    <div class="clear"></div>
    <div class="center">
      <div class="col-main">
        <div class="main-wrap" style="width: 100%;margin-left:10%; background: white;">
          <div class="wrap-left">
            <div class="wrap-list">
              <div class="m-user">
                <!--个人信息 -->
                <div class="m-bg"></div>
                <div class="m-userinfo" style="height:160px" v-if="user">
                  <div class="m-baseinfo">
                    <a href="information.html">
                      <img :src="user.userlogo" width="50px">
                    </a>
                    <em class="s-name">{{user.nickname}}</em>
                    <span class="vip1" v-if="user.authen">
                      <div class="s-prestige am-btn am-round">
                        实名认证</div>
                    </span>
                  </div>
                  <div class="m-baseinfo">
                    <em class="z-info">
                      <p class="fl"> 注册时间：</p>
                      <p v-text="dateFormatter(user.createTime)" class="fl"></p>
                    </em>
                    <br />
                    <em class="z-info">会员Id：{{user.userId}}</em>
                  </div>
                  <div class="m-right">
                    <div class="m-new">
                      <a href="news.html">卖出：{{itemCount.sellNum}}件</a>
                    </div>
                    <div class="m-address">
                      <a href="address.html" class="i-trigger">买入：{{itemCount.buyNum}}件</a>
                    </div>
                  </div>
                </div>

                <!--评价管理-->
                <div class="m-userproperty">
                  <div class="s-bar">
                    <i class="s-icon"></i>
                  </div>
                  <el-tabs type="border-card" v-model="activename" style="border:1px solid rgb(228,234,238)" @tab-click="tbChanged">
                    <el-tab-pane label="卖出评价" name="tb1">
                      <em class="mr-5">好评：{{commentCount.good}}</em>
                      <em class="mr-5">中评：{{commentCount.neutral}}</em>
                      <em class="mr-5">差评：{{commentCount.bad}}</em>
                      <b class="line mt-10 mb-10"></b>
                      <el-table :data="sellingcomments" style="width: 100%">
                        <el-table-column prop="buyerComment" label="评价内容">
                        </el-table-column>
                        <el-table-column label="评价时间" width="180">
                          <template slot-scope="scope">
                            <em v-text="dateFormatter(scope.row.createTime)"></em>
                          </template>
                        </el-table-column>
                        <el-table-column label="评级" width="180">
                          <template slot-scope="scope">
                            <em v-if="scope.row.level==1">差评</em>
                            <em v-if="scope.row.level==2">中评</em>
                            <em v-if="scope.row.level==3">好评</em>
                          </template>
                        </el-table-column>
                        <el-table-column prop="mchtName" label="评价用户" width="180">
                        </el-table-column>
                      </el-table>
                      <div v-if="msgcount1>msgpageSize1" class="s-more-btn i-load-more-item" data-screen="0" @click="msgpageSize1+=10,qryComments()"><i class="am-icon-refresh am-icon-fw"></i>加载更多</div>
                    </el-tab-pane>
                    <el-tab-pane label="购买评价" name="tb2">
                      <em class="mr-5">好评：{{commentCount.good}}</em>
                      <em class="mr-5">中评：{{commentCount.neutral}}</em>
                      <em class="mr-5">差评：{{commentCount.bad}}</em>
                      <b class="line mt-10 mb-10"></b>
                      <el-table :data="buycomments" style="width: 100%">
                        <el-table-column prop="buyerComment" label="评价内容">
                        </el-table-column>
                        <el-table-column label="评价时间" width="180">
                          <template slot-scope="scope">
                            <em v-text="dateFormatter(scope.row.createTime)"></em>
                          </template>
                        </el-table-column>
                        <el-table-column label="评级" width="180">
                          <template slot-scope="scope">
                            <em v-if="scope.row.level==1">差评</em>
                            <em v-if="scope.row.level==2">中评</em>
                            <em v-if="scope.row.level==3">好评</em>
                          </template>
                        </el-table-column>
                        <el-table-column prop="mchtName" label="卖家" width="180">
                        </el-table-column>
                      </el-table>
                      <div v-if="msgcount2>msgpageSize2" class="s-more-btn i-load-more-item" data-screen="0" @click="msgpageSize2+=10,qryComments2()"><i class="am-icon-refresh am-icon-fw"></i>加载更多</div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
              <div class="box-container-bottom"></div>

              <!--收藏夹 -->
              <div class="you-like">
                <div class="s-bar">在售商品
                </div>
                <div class="s-content">
                  <div class="s-item-wrap" v-for="item in items">
                    <div class="s-item">
                      <div class="s-pic">
                        <a href="#" class="s-pic-link">
                          <img :src="item.mainImg" :alt="item.itemName" :title="item.itemName" class="s-pic-img s-guess-item-img">
                        </a>
                      </div>
                      <div class="s-price-box">
                        <span class="s-price"><em class="s-price-sign">¥</em><em class="s-value">{{item.transPrice}}</em></span>
                        <span class="s-history-price"><em class="s-price-sign">¥</em><em class="s-value">{{item.sellingPrice}}</em></span>

                      </div>
                      <div class="s-title" @click="toItem(item.itemId)"><a href="javascript:;;">{{item.itemName}}</a></div>

                    </div>
                  </div>
                </div>
                <div v-if="total>pageSize" class="s-more-btn i-load-more-item" data-screen="0" @click="pageSize+=12,qryItems()"><i class="am-icon-refresh am-icon-fw"></i>加载更多</div>
              </div>
            </div>
          </div>
          <div class="wrap-right">
          </div>
        </div>
        <!--底部-->
        <foot></foot>
      </div>
      <navfull></navfull>
    </div>
  </div>
</template>

<script>
import myheader from '@/components/myheader.vue'
import navfull from '@/components/navfull.vue'
import navtable from '@/components/navtable.vue'
import leftmenu from '@/components/leftmenu.vue'
import foot from '@/components/foot.vue'
export default {
  name: 'tmpl',
  data () {
    return {
      msgindex: 1,
      msgpageSize1: 5,
      msgpageSize2: 5,
      msgcount1: 100,
      msgcount2: 100,
      commentCount: {},
      user: null,
      itemCount: { sellNum: 0, buyNum: 0 },
      items: [],
      pageSize: 12,
      total: 100,
      sellingcomments: [],
      buycomments: [],
      activename: "tb1"
    }
  },
  components: {
    myheader,
    navfull,
    navtable,
    leftmenu,
    foot
  },
  mounted () {
    this.qryItems();
    this.qryUser();
    this.qryOrderItemCount();
    this.qryComments();
  },
  methods: {
    qryUser () {
      let userId = this.$route.query.userId;
      this.axios.get("/user/user/" + userId).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.user = result.data;
        }
      })
    },
    qryOrderItemCount () {
      let userId = this.$route.query.userId;
      this.axios.get("/trade/order/detail/count/" + userId).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.itemCount = result.data;
        }
      })
    },
    tbChanged () {
      let activename = this.activename;
      switch (activename) {
        case "tb1":
          this.qryComments();
          return;
        case "tb2":
          this.qryComments2();
          return;
      }
    },
    qryComments () {
      let userId = this.$route.query.userId;
      this.axios.get("/trade/comments4P", {
        params: {
          mchtId: userId,
          type: 1,
          index: this.msgindex,
          pageSize: this.msgpageSize1
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.msgcount1 = result.total;
          this.sellingcomments = result.data;
        }
      })
      this.axios.get("/trade/comment/count", {
        params: {
          mchtId: userId
        }
      }).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.commentCount = result.data;
        }
      })

    },
    qryComments2 (e) {
      let userId = this.$route.query.userId;
      this.axios.get("/trade/comments4P", {
        params: {
          buyerId: userId,
          type: 1,
          index: this.msgindex,
          pageSize: this.msgpageSize2
        }
      }).then((res) => {
        var result = res.data;
        if (result.code == 200) {
          this.msgcount2 = result.total;
          this.buycomments = result.data;
        }
      })

      this.axios.get("/trade/comment/count", {
        params: {
          buyerId: userId
        }
      }).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.commentCount = result.data;
        }
      })
    },
    qryItems () {
      let userId = this.$route.query.userId;
      this.axios.get("/item/searchItemList", {
        params: {
          userId: userId,
          index: 1,
          pageSize: this.pageSize
        }
      }).then((res) => {
        let result = res.data;
        if (result.code == 200) {
          this.items = result.data.rows;
          this.total = result.data.total;
        }
      })
    },
    toItem (itemId) {
      this.$router.push({
        name: "item",
        query: {
          itemId: itemId
        }
      })
    },
    dateFormatter (date) {
      var time = new Date(date);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d);
    },
  }
}
function add0 (m) {
  return m < 10 ? '0' + m : m
}
</script>

<style scoped>
@import "../AmazeUI-2.4.2/assets/css/admin.css";
@import "../AmazeUI-2.4.2/assets/css/amazeui.css";
@import "../assets/css/personal.css";
@import "../assets/css/systyle.css";
@import "../assets/css/common/commonStyle.css";
</style>
